<template>
  <div>
    <h3>{{ state.count }}</h3>
    <button @click="addCount">+++++++</button>
  </div>
</template>

<script>
// 浅层响应式 shallowRef  -- 优化
import { shallowRef } from 'vue'

export default {
  setup() {
    const state = shallowRef({ count: 1 })

    const addCount = () => {
      // 不会触发更改
      // state.value.count = Date.now()

      // 会触发更改
      state.value = { count: Date.now() }
    }

    return {
      state,
      addCount
    }
  }
}
</script>

<style lang="scss"></style>
